
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>demo</title>
<style type="text/css">
.content{
	display: block;
	width:1000px;
	margin: 0 auto;
}
.content>*{
	display: block;
	width:500px;
	margin: 10px auto;
}
.center{
	margin: 10px auto;
	text-align: center;
}
textarea.console{
	display: block;
	height: 500px;
	width:  500px;
	resize:vertical;
/*	none：用户不能操纵机制调节元素的尺寸；
	both：用户可以调节元素的宽度和高度；
	horizontal：用户可以调节元素的宽度；
	vertical：让用户可以调节元素的高度；
	inherit：默认继承。*/
}
</style>
</head>
<body>
<div class="content">
	<!-- title以及点击操作区域 -->
	<h1 class="center" onclick="show()">show</h1>
	<!-- 文本输入操作区域 -->
	<input type="text" id="input" value="" onfocusout="evalxxxx(this)" />
	<!-- 按钮操作区域 -->
	<input type="button" value="show0()" onclick="show0()" />
	<!-- 按钮操作区域 -->
	<input type="button" value="show1()" onclick="show1()" />
	<!-- 按钮操作区域 -->
	<input type="button" value="show2()" onclick="show2()" />
	<!-- 结果显示区域 -->
	<textarea id="console" class="console" readonly="readonly"></textarea>
</div>
<script type="text/javascript">
var count = 0;
var ele = document.getElementById('console');	
function Log(xxx){
	count++;
	// count = 0;
	console.log(xxx);
	// 更新数据
	ele.value+=count+":"+xxx+"\n";
	// 始终保持最底部
	ele.scrollTop = ele.scrollHeight;
};


//代码区

function Person(){
} 

var friend = new Person();

Person.prototype={
	name:"赵日天",
	age:24,
	job:"码农",
	
	sayName:function(){
		Log(this.name);
	}
}

// Person.prototype.sayHi = function(){
// 	Log("hi");
// }


//显示结果
function show0(){
	friend.sayName();
}
</script>
</body>

</html>